<template>
    <div style="margin: 0px; padding: 0px">
        <HomeTypeHeader :icon-left="trafficIcon"></HomeTypeHeader>
        <Swiper :allList="allList"></Swiper>
    </div>
</template>

<script>
    import Swiper from '@/utils/common/Swiper'
    import HomeTypeHeader from "@/utils/common/HomeTypeHeader";
    export default {
      name: "trafficHeader",
      props: ['active'],
      data() {
        return {
          allList: [],
          trafficIcon: '\ue667'
        }
      },
      components: {
        Swiper,
        HomeTypeHeader
      },
      mounted() {
        this.getList();
      },
      methods:{
        getList(){
          this.getRequest("/home/traffic/imgUrlList").then(res => {
            if (res) {
              this.allList = res.data;
            }
          })
        }
      }
    }
</script>

<style scoped>
.headerIcon{
  position: fixed;
  display: flex;
  justify-content: space-between;
  width: 92%;
  left: 4%;
  top: 1%;
  z-index: 100;
}
.iconfont{
  font-size: 26px;
  line-height: .8rem;
  color: white;
}
.iconLeft, .iconRight{
  background-color: rgba(0,0,0,0.4);
  border-radius: 50%;
  width: .8rem;
  height: .8rem;
  text-align: center;
}
</style>